// 导入路由相关的模块
import FindView from '@/views/FindView.vue'
import MyView from '@/views/MyView.vue'
import HomeView from '@/views/HomeView.vue'
import SearchView from '@/views/SearchView.vue'
import NotFound from '@/views/NotFound.vue'
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 创建路由对象
const router = createRouter({
  // history 设置路由的模式  HashHistory
  // url 中会多#
  // history: createWebHashHistory(),
  history: createWebHistory(),
  // 配置路由的对应关系
  // url和组件（页面）的对应关系
  routes: [
    {
      path: '/find',
      component: FindView
    },
    {
      path: '/my',
      component: MyView
    },
    {
      path: '/home',
      // 使用路由懒加载之后：
      // 页面不打开不会解析组件，可以让网页首次打开的时候速度快一些
      component: () => import('@/views/HomeView.vue')
    },
    {
      // /search 只能通过 查询参数传递
      // 动态路由传递参数 /search/xxx
      // path: '/search',
      // 增加? 不传递参数也可以正常的跳转
      // ? 可选
      path: '/search/:key?',
      name: 'sp',
      // component: SearchView
      component: () => import('@/views/SearchView.vue')
    },
    // redirect 重定向
    // 路径是/ 解析到 /home
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/notfound',
      component: NotFound
    },
    // 404要放在末尾
    // 如果都解析不了，就会解析到 404 页面
    // 暂时一些默认提示信息，点击可以返回首页
    // 如果都匹配不了，会解析到 /notfound 地址，美化 URL
    {
      path: '/:catchAll(.*)',
      redirect: '/notfound'
      // component: NotFound
    }
  ]
})

// 导出
export default router
